<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Modal</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>

<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Modal</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content padding>
        <ion-modal-controller></ion-modal-controller>
        <p>
          <ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
        </p>
      </ion-content>

  </ion-app>

  <script>
    window.addEventListener("ionModalDidDismiss", function(e){console.log('DidDismiss', e)})
    window.addEventListener("ionModalWillDismiss", function(e){console.log('WillDismiss', e)})
    async function presentModal() {

      // initialize controller
      const modalController = document.querySelector('ion-modal-controller');
      await modalController.componentOnReady();

      // create component to open
      const element = document.createElement('div');
      element.innerHTML = `
      <ion-header>
        <ion-toolbar>
          <ion-title>Super Modal</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <h1>Content of doom</h1>
        <div>Here's some more content</div>
        <ion-button class="dismiss">Dismiss Modal</ion-button>
      </ion-content>
      `;

      // listen for close event
      const button = element.querySelector('ion-button');
      button.addEventListener('click', () => {
        modalController.dismiss();
      });

      // present the modal
      const modalElement = await modalController.create({
        component: element
      });
      modalElement.present();
    }
  </script>
</body>
</html>
